<template>
  <div class="stock-selector">
    <button @click="showSelector = !showSelector" class="select-btn">
      📈 选择股票 ({{ selectedStocks.length }}/15)
    </button>
    
    <div v-if="showSelector" class="modal">
      <div class="modal-content">
        <div class="modal-header">
          <h3>股票选择器</h3>
          <button @click="showSelector = false" class="close-btn">×</button>
        </div>
        
        <div class="tabs">
          <button 
            v-for="tab in tabs" 
            :key="tab.key"
            @click="activeTab = tab.key"
            :class="['tab', { active: activeTab === tab.key }]"
          >
            {{ tab.name }}
          </button>
        </div>
        
        <input 
          v-model="searchText" 
          type="text" 
          placeholder="搜索股票代码或名称..."
          class="search-input"
        >
        
        <div class="stock-list">
          <div 
            v-for="stock in filteredStocks" 
            :key="stock[0]"
            @click="toggleStock(stock[0])"
            :class="['stock-item', { selected: isSelected(stock[0]) }]"
          >
            <div class="stock-info">
              <div class="stock-code">{{ stock[0].replace('.US', '') }}</div>
              <div class="stock-name">{{ stock[1] }}</div>
              <div class="stock-details">
                <span class="exchange">{{ stock[2] }}</span>
                <span class="sector">{{ stock[3] }}</span>
              </div>
            </div>
            <div class="heart-icon" @click.stop="toggleStock(stock[0])">
              {{ isSelected(stock[0]) ? '❤️' : '🤍' }}
            </div>
          </div>
        </div>
        
        <div class="selected-preview" v-if="selectedStocks.length > 0">
          <h4>已选择的股票:</h4>
          <div class="selected-tags">
            <span 
              v-for="stock in selectedStocks" 
              :key="stock"
              class="selected-tag"
            >
              {{ stock.replace('.US', '') }}
              <button @click="removeStock(stock)" class="remove-btn">×</button>
            </span>
          </div>
        </div>
        
        <div class="footer">
          <span class="counter">已选择 {{ selectedStocks.length }}/15 只股票</span>
          <div class="buttons">
            <button @click="clearSelection" class="btn-clear">清空</button>
            <button @click="testButtonClick" class="btn-confirm">确认选择</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StockSelector',
  data() {
    return {
      showSelector: false,
      activeTab: 'leverage',
      searchText: '',
      selectedStocks: [],
      tabs: [
        { key: 'leverage', name: '杠杆ETF' },
        { key: 'regular', name: '常规股票' },
        { key: 'individual', name: '个股' }
      ],
      leverage_stocks: [
        ['GDXU.US', 'GDXU', 'DEFAULT', 'DEFAULT'],
        ['PTIR.US', 'PTIR', 'DEFAULT', 'DEFAULT'],
        ['KORU.US', 'KORU', 'DEFAULT', 'DEFAULT'],
        ['UGL.US', 'UGL', 'DEFAULT', 'DEFAULT'],
        ['NVDL.US', 'NVDL', 'DEFAULT', 'DEFAULT'],
        ['AVGX.US', 'AVGX', 'DEFAULT', 'DEFAULT'],
        ['GGLL.US', 'GGLL', 'DEFAULT', 'DEFAULT'],
        ['UTSL.US', 'UTSL', 'DEFAULT', 'DEFAULT'],
        ['FBL.US', 'FBL', 'DEFAULT', 'DEFAULT'],
        ['BULZ.US', 'BULZ', 'DEFAULT', 'DEFAULT'],
        ['TQQQ.US', 'TQQQ', 'NASDAQ', 'Technology'],
        ['ETHU.US', 'ETHU', 'DEFAULT', 'DEFAULT'],
        ['TECL.US', 'TECL', 'NASDAQ', 'Technology'],
        ['SSO.US', 'SSO', 'NYSE', 'S&P 500'],
        ['MSFU.US', 'MSFU', 'DEFAULT', 'DEFAULT'],
        ['UPRO.US', 'UPRO', 'NYSE', 'S&P 500'],
        ['SPXL.US', 'SPXL', 'NYSE', 'ETF'],
        ['FNGU.US', 'FNGU', 'DEFAULT', 'DEFAULT'],
        ['DFEN.US', 'DFEN', 'NYSE', 'Aerospace'],
        ['SPYU.US', 'SPYU', 'DEFAULT', 'DEFAULT'],

        // 以下为注释部分
        // ['AMDL.US', 'AMDL', 'DEFAULT', 'DEFAULT'],
        // ['WEBL.US', 'WEBL', 'DEFAULT', 'DEFAULT'],
        // ['TSMX.US', 'TSMX', 'DEFAULT', 'DEFAULT'],
        // ['EURL.US', 'EURL', 'DEFAULT', 'DEFAULT'],
        // ['BITX.US', 'BITX', 'DEFAULT', 'DEFAULT'],
        // ['RETL.US', 'RETL', 'DEFAULT', 'DEFAULT'],
        // ['AAPU.US', 'AAPU', 'DEFAULT', 'DEFAULT'],
        // ['BRZU.US', 'BRZU', 'DEFAULT', 'DEFAULT'],
        // ['BABX.US', 'BABX', 'DEFAULT', 'DEFAULT'],
        // ['YINN.US', 'YINN', 'DEFAULT', 'DEFAULT'],
        // ['CWEB.US', 'CWEB', 'DEFAULT', 'DEFAULT'],
        // ['FAS.US', 'FAS', 'DEFAULT', 'DEFAULT'],
        // ['CHAU.US', 'CHAU', 'DEFAULT', 'DEFAULT'],
        // ['UDOW.US', 'UDOW', 'DEFAULT', 'DEFAULT'],
        // ['NAIL.US', 'NAIL', 'DEFAULT', 'DEFAULT'],
        // ['AMZU.US', 'AMZU', 'DEFAULT', 'DEFAULT'],
        // ['SOXL.US', 'SOXL', 'DEFAULT', 'DEFAULT'],
        // ['TNA.US', 'TNA', 'DEFAULT', 'DEFAULT'],
        // ['TSLL.US', 'TSLL', 'DEFAULT', 'DEFAULT'],
        // ['CONL.US', 'CONL', 'DEFAULT', 'DEFAULT'],
        // ['MSTU.US', 'MSTU', 'DEFAULT', 'DEFAULT'],
        // ['DPST.US', 'DPST', 'DEFAULT', 'DEFAULT'],
        // ['LABU.US', 'LABU', 'DEFAULT', 'DEFAULT'],
        // ['CURE.US', 'CURE', 'DEFAULT', 'DEFAULT'],
        // ['SMCX.US', 'SMCX', 'DEFAULT', 'DEFAULT'],
        // ['BRKU.US', 'BRKU', 'DEFAULT', 'DEFAULT'],
        // ['TMF.US', 'TMF', 'DEFAULT', 'DEFAULT'],
        // ['UCO.US', 'UCO', 'DEFAULT', 'DEFAULT'],
        // ['OILU.US', 'OILU', 'DEFAULT', 'DEFAULT'],
        // ['INDL.US', 'INDL', 'DEFAULT', 'DEFAULT'],
        // ['BOIL.US', 'BOIL', 'DEFAULT', 'DEFAULT']
      ],
      regular_stocks: [
        ['AAPL.US', 'Apple Inc.', 'NASDAQ', 'Technology'],
        ['MSFT.US', 'Microsoft Corp.', 'NASDAQ', 'Technology'],
        ['GOOGL.US', 'Alphabet Inc.', 'NASDAQ', 'Technology'],
        ['AMZN.US', 'Amazon.com Inc.', 'NASDAQ', 'Consumer'],
        ['TSLA.US', 'Tesla Inc.', 'NASDAQ', 'Automotive'],
        ['META.US', 'Meta Platforms Inc.', 'NASDAQ', 'Technology'],
        ['NVDA.US', 'NVIDIA Corp.', 'NASDAQ', 'Technology'],
        ['BRK.B.US', 'Berkshire Hathaway Inc.', 'NYSE', 'Financial'],
        ['V.US', 'Visa Inc.', 'NYSE', 'Financial'],
        ['JNJ.US', 'Johnson & Johnson', 'NYSE', 'Healthcare'],
        ['WMT.US', 'Walmart Inc.', 'NYSE', 'Consumer'],
        ['JPM.US', 'JPMorgan Chase & Co.', 'NYSE', 'Financial'],
        ['MA.US', 'Mastercard Inc.', 'NYSE', 'Financial'],
        ['PG.US', 'Procter & Gamble Co.', 'NYSE', 'Consumer'],
        ['UNH.US', 'UnitedHealth Group Inc.', 'NYSE', 'Healthcare'],
        ['DIS.US', 'Walt Disney Co.', 'NYSE', 'Entertainment'],
        ['HD.US', 'Home Depot Inc.', 'NYSE', 'Consumer'],
        ['PYPL.US', 'PayPal Holdings Inc.', 'NASDAQ', 'Financial'],
        ['BAC.US', 'Bank of America Corp.', 'NYSE', 'Financial'],
        ['NFLX.US', 'Netflix Inc.', 'NASDAQ', 'Entertainment'],
        ['ADBE.US', 'Adobe Inc.', 'NASDAQ', 'Technology'],
        ['CRM.US', 'Salesforce Inc.', 'NYSE', 'Technology'],
        ['CMCSA.US', 'Comcast Corp.', 'NASDAQ', 'Telecommunications'],
        ['XOM.US', 'Exxon Mobil Corp.', 'NYSE', 'Energy'],
        ['VZ.US', 'Verizon Communications Inc.', 'NYSE', 'Telecommunications'],
        ['KO.US', 'Coca-Cola Co.', 'NYSE', 'Consumer'],
        ['NKE.US', 'Nike Inc.', 'NYSE', 'Consumer'],
        ['T.US', 'AT&T Inc.', 'NYSE', 'Telecommunications'],
        ['PFE.US', 'Pfizer Inc.', 'NYSE', 'Healthcare'],
        ['INTC.US', 'Intel Corp.', 'NASDAQ', 'Technology'],
        ['ABT.US', 'Abbott Laboratories', 'NYSE', 'Healthcare'],
        ['MRK.US', 'Merck & Co. Inc.', 'NYSE', 'Healthcare'],
        ['CVX.US', 'Chevron Corp.', 'NYSE', 'Energy'],
        ['COST.US', 'Costco Wholesale Corp.', 'NASDAQ', 'Consumer'],
        ['TMO.US', 'Thermo Fisher Scientific Inc.', 'NYSE', 'Healthcare'],
        ['AVGO.US', 'Broadcom Inc.', 'NASDAQ', 'Technology'],
        ['ACN.US', 'Accenture PLC', 'NYSE', 'Technology'],
        ['DHR.US', 'Danaher Corp.', 'NYSE', 'Healthcare'],
        ['TXN.US', 'Texas Instruments Inc.', 'NASDAQ', 'Technology'],
        ['NEE.US', 'NextEra Energy Inc.', 'NYSE', 'Utilities'],
        ['LIN.US', 'Linde PLC', 'NYSE', 'Basic Materials'],
        ['BMY.US', 'Bristol-Myers Squibb Co.', 'NYSE', 'Healthcare'],
        ['UPS.US', 'United Parcel Service Inc.', 'NYSE', 'Transportation'],
        ['QCOM.US', 'Qualcomm Inc.', 'NASDAQ', 'Technology'],
        ['PM.US', 'Philip Morris International Inc.', 'NYSE', 'Consumer'],
        ['SBUX.US', 'Starbucks Corp.', 'NASDAQ', 'Consumer'],
        ['HON.US', 'Honeywell International Inc.', 'NASDAQ', 'Industrial'],
        ['LOW.US', 'Lowe\'s Companies Inc.', 'NYSE', 'Consumer']
      ],
      individual_stocks: [
        ['AMZN.US', 'Amazon.com Inc.', 'NASDAQ', 'Technology'],
        ['GME.US', 'GameStop Corp.', 'NYSE', 'Consumer'],
        ['AMC.US', 'AMC Entertainment Holdings Inc.', 'NYSE', 'Entertainment'],
        ['BB.US', 'BlackBerry Ltd.', 'NYSE', 'Technology'],
        ['NOK.US', 'Nokia Corp.', 'NYSE', 'Technology'],
        ['PLTR.US', 'Palantir Technologies Inc.', 'NYSE', 'Technology'],
        ['WISH.US', 'ContextLogic Inc.', 'NASDAQ', 'Consumer'],
        ['CLOV.US', 'Clover Health Investments Corp.', 'NASDAQ', 'Healthcare'],
        ['CLNE.US', 'Clean Energy Fuels Corp.', 'NASDAQ', 'Energy'],
        ['WKHS.US', 'Workhorse Group Inc.', 'NASDAQ', 'Automotive'],
        ['RIDE.US', 'Lordstown Motors Corp.', 'NASDAQ', 'Automotive'],
        ['LCID.US', 'Lucid Group Inc.', 'NASDAQ', 'Automotive'],
        ['RIVN.US', 'Rivian Automotive Inc.', 'NASDAQ', 'Automotive'],
        ['F.US', 'Ford Motor Co.', 'NYSE', 'Automotive'],
        ['NIO.US', 'NIO Inc.', 'NYSE', 'Automotive'],
        ['XPEV.US', 'XPeng Inc.', 'NYSE', 'Automotive'],
        ['LI.US', 'Li Auto Inc.', 'NASDAQ', 'Automotive'],
        ['BABA.US', 'Alibaba Group Holding Ltd.', 'NYSE', 'Technology'],
        ['JD.US', 'JD.com Inc.', 'NASDAQ', 'Consumer'],
        ['PDD.US', 'Pinduoduo Inc.', 'NASDAQ', 'Consumer'],
        ['BILI.US', 'Bilibili Inc.', 'NASDAQ', 'Entertainment'],
        ['IQ.US', 'iQIYI Inc.', 'NASDAQ', 'Entertainment'],
        ['ZM.US', 'Zoom Video Communications Inc.', 'NASDAQ', 'Technology'],
        ['DOCU.US', 'DocuSign Inc.', 'NASDAQ', 'Technology'],
        ['PTON.US', 'Peloton Interactive Inc.', 'NASDAQ', 'Consumer'],
        ['ROKU.US', 'Roku Inc.', 'NASDAQ', 'Technology'],
        ['SQ.US', 'Block Inc.', 'NYSE', 'Financial'],
        ['HOOD.US', 'Robinhood Markets Inc.', 'NASDAQ', 'Financial'],
        ['COIN.US', 'Coinbase Global Inc.', 'NASDAQ', 'Financial'],
        ['RBLX.US', 'Roblox Corp.', 'NYSE', 'Technology'],
        ['UBER.US', 'Uber Technologies Inc.', 'NYSE', 'Transportation'],
        ['LYFT.US', 'Lyft Inc.', 'NASDAQ', 'Transportation'],
        ['ABNB.US', 'Airbnb Inc.', 'NASDAQ', 'Consumer'],
        ['DASH.US', 'DoorDash Inc.', 'NYSE', 'Consumer'],
        ['SNOW.US', 'Snowflake Inc.', 'NYSE', 'Technology'],
        ['CRWD.US', 'CrowdStrike Holdings Inc.', 'NASDAQ', 'Technology'],
        ['ZS.US', 'Zscaler Inc.', 'NASDAQ', 'Technology'],
        ['OKTA.US', 'Okta Inc.', 'NASDAQ', 'Technology'],
        ['TWLO.US', 'Twilio Inc.', 'NYSE', 'Technology'],
        ['SHOP.US', 'Shopify Inc.', 'NYSE', 'Technology'],
        ['SPOT.US', 'Spotify Technology S.A.', 'NYSE', 'Entertainment'],
        ['SNAP.US', 'Snap Inc.', 'NYSE', 'Technology'],
        ['PINS.US', 'Pinterest Inc.', 'NYSE', 'Technology'],
        ['MTCH.US', 'Match Group Inc.', 'NASDAQ', 'Technology']
      ]
    }
  },
  computed: {
    currentStocks() {
      switch (this.activeTab) {
        case 'leverage': return this.leverage_stocks
        case 'regular': return this.regular_stocks
        case 'individual': return this.individual_stocks
        default: return []
      }
    },
    filteredStocks() {
      if (!this.searchText) return this.currentStocks
      const search = this.searchText.toLowerCase()
      return this.currentStocks.filter(stock => 
        stock[0].toLowerCase().includes(search) ||
        stock[1].toLowerCase().includes(search) ||
        stock[2].toLowerCase().includes(search) ||
        stock[3].toLowerCase().includes(search)
      )
    }
  },
  methods: {
    toggleStock(stockCode) {
      const index = this.selectedStocks.indexOf(stockCode)
      if (index > -1) {
        this.selectedStocks.splice(index, 1)
      } else {
        if (this.selectedStocks.length < 15) {
          this.selectedStocks.push(stockCode)
        } else {
          this.$message && this.$message.warning('最多只能选择15只股票')
          // 如果没有message组件，使用alert
          if (!this.$message) {
            alert('最多只能选择15只股票')
          }
        }
      }
    },
    removeStock(stockCode) {
      const index = this.selectedStocks.indexOf(stockCode)
      if (index > -1) {
        this.selectedStocks.splice(index, 1)
      }
    },
    isSelected(stockCode) {
      return this.selectedStocks.includes(stockCode)
    },
    clearSelection() {
      this.selectedStocks = []
    },
    testButtonClick() {
      console.log('🔍 testButtonClick方法被调用了!')
      alert('按钮点击测试成功!')
      this.confirmSelection()
    },
    confirmSelection() {
      console.log('🔍 confirmSelection方法被调用了!')
      console.log('当前选中的股票:', this.selectedStocks)
      
      if (this.selectedStocks.length === 0) {
        console.log('❌ 没有选择股票，显示警告')
        this.$message && this.$message.warning('请至少选择一只股票')
        if (!this.$message) {
          alert('请至少选择一只股票')
        }
        return
      }
      
      console.log('✅ 确认选择，关闭选择器并发送事件')
      this.showSelector = false
      this.$emit('stocks-selected', this.selectedStocks)
      console.log('📤 事件已发送:', this.selectedStocks)
    }
  }
}
</script>

<style scoped>
.stock-selector {
  position: relative;
}

.select-btn {
  padding: 12px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.select-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
  pointer-events: auto;
}

.modal-content {
  background: white;
  border-radius: 16px;
  width: 90%;
  max-width: 700px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  pointer-events: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 24px 16px;
  border-bottom: 1px solid #eee;
}

.modal-header h3 {
  margin: 0;
  color: #333;
  font-size: 20px;
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #999;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: #f5f5f5;
  color: #666;
}

.tabs {
  display: flex;
  border-bottom: 1px solid #eee;
  background: #f8f9fa;
}

.tab {
  flex: 1;
  padding: 16px 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  font-weight: 500;
  transition: all 0.3s ease;
}

.tab.active {
  color: #667eea;
  border-bottom: 3px solid #667eea;
  background: white;
}

.tab:hover {
  background: #f0f2ff;
}

.search-input {
  width: calc(100% - 48px);
  margin: 20px 24px;
  padding: 12px 16px;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.stock-list {
  flex: 1;
  overflow-y: auto;
  max-height: 350px;
  padding: 0 8px;
}

.stock-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 8px;
  margin: 4px 0;
}

.stock-item:hover {
  background-color: #f8f9ff;
  transform: translateX(4px);
}

.stock-item.selected {
  background-color: #f0f4ff;
  border-left: 4px solid #667eea;
}

.stock-info {
  flex: 1;
}

.stock-code {
  font-weight: 600;
  color: #333;
  font-size: 16px;
  margin-bottom: 4px;
}

.stock-name {
  color: #666;
  font-size: 13px;
  margin-bottom: 4px;
}

.stock-details {
  display: flex;
  gap: 12px;
  font-size: 11px;
}

.exchange {
  color: #667eea;
  background: #f0f4ff;
  padding: 2px 6px;
  border-radius: 4px;
}

.sector {
  color: #888;
}

.heart-icon {
  font-size: 20px;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.2s ease;
  cursor: pointer;
}

.heart-icon:hover {
  background: rgba(255, 192, 203, 0.2);
  transform: scale(1.1);
}

.selected-preview {
  padding: 16px 24px;
  border-top: 1px solid #eee;
  background: #f8f9fa;
}

.selected-preview h4 {
  margin: 0 0 12px 0;
  color: #333;
  font-size: 14px;
  font-weight: 600;
}

.selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.selected-tag {
  background: #667eea;
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.remove-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.remove-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-top: 1px solid #eee;
  background: #f8f9fa;
}

.counter {
  color: #666;
  font-size: 14px;
  font-weight: 500;
}

.buttons {
  display: flex;
  gap: 12px;
}

.btn-clear, .btn-confirm {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-clear {
  background: #f8f9fa;
  color: #666;
  border: 1px solid #ddd;
}

.btn-clear:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}

.btn-confirm {
  background: #667eea;
  color: white;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.btn-confirm:hover {
  background: #5a6fd8;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* 滚动条样式 */
.stock-list::-webkit-scrollbar {
  width: 6px;
}

.stock-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.stock-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.stock-list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>
